<!--
* 方法:Logs-list.vue
* 描述:系统日记列表组件
* 作者:Jimmy
* 日期:2018-08-01
*/
-->
<style lang="less">
  @import '../../../styles/common.less';
  @import '../system.less';
</style>
<template>
  <Card>
    <p slot="title">
      系统日记
    </p>
    <Row class="margin-bottom-15">
      <div style="float: left;">
        <Button @click="remove">
          <Icon type="ios-trash" />
          清空日记
        </Button>
        <Button onclick="location.reload()" class="margin-left-8">
          <Icon type="md-sync"/>
          刷新
        </Button>
      </div>
      <div style="float: right;">
        <Input placeholder="请输入用户、内容、IP搜搜..." v-model="keyword" style="width: 200px"/>
        <Button type="primary" @click="changePage(1)" class="margin-left-8">
          <Icon type="md-search"/>
          搜索
        </Button>
      </div>
    </Row>
    <Row>
      <Table :columns="columns" :data="listInfo" :loading="loading"></Table>
    </Row>
    <Row class="margin-top-20 center">
      <Page :total="totalCount" :current="page" :page-size="pageSize" show-elevator show-total @on-change="changePage"></Page>
    </Row>
  </Card>
</template>
<script>
export default {
  data () {
    return {
      // 头部标题
      columns: [
        {
          title: '用户',
          key: 'username',
          className: 'userAvator',
          align: 'middle',
          width: 120,
          render: (h, params) => {
            console.log(params.row.avator)
            return h('div', [
              h('img', {
                domProps: {
                  src: params.row.avator
                }
              }),
              h('span', params.row.username)
            ])
          }
        },
        {
          title: '权限组',
          key: 'roleidname',
          width: 120
        },
        {
          title: '日记内容',
          key: 'description'
        },
        {
          title: '操作IP',
          key: 'addip',
          width: 100
        },
        {
          title: '操作时间',
          key: 'addtime',
          width: 200
        }
      ],
      // 页数
      page: 1,
      // 加载
      loading: true,
      // 关键字
      keyword: '',
      // 显示数据
      listInfo: [],
      // 每页显示多少条
      pageSize: 10,
      // 初始化信息总条数
      totalCount: 1
    }
  },
  methods: {
    remove (id) {
      this.$Modal.confirm({
        title: '清空日记提示',
        content: '<p>你要定要清空日记信息吗? </p>',
        loading: true,
        width: 260,
        onOk: () => {
          setTimeout(() => {
            // 读取请求数据
            this.$api.logs({
              title: '清空日记!' // 删除日记记录信息标注
            }, 'del', 'delete').then((response) => {
              if (response.code === 200) {
                this.getListData()
                this.$Message.success(response.msg)
              } else {
                this.$Message.error(response.msg)
              }
            }).catch((error) => {
              this.$Message.error(error.message)
            })
            this.$Modal.remove()
          }, 1000)
        }
      })
    },
    // 列表加载
    getListData (page) {
      // 读取请求数据
      this.$api.logs({
        page: this.page,
        pagesize: this.pageSize,
        keyword: this.keyword,
        closelog: 'ok' // 关闭日记记录
      }, 'index').then((response) => {
        if (response.code === 200) {
          this.totalCount = response.data.totalcount
          this.listInfo = response.data.listinfo
        } else if (response.code === 203) {
          this.$Message.error(response.msg)
        } else {
          this.totalCount = 1
          this.listInfo = []
        }
        this.loading = false
      }).catch((error) => {
        this.$Message.error(error.message)
      })
    },
    // 分页加载列表
    changePage (index) {
      this.page = index
      this.getListData()
    }
  },
  created () {
    // 第一次打开页面加载列表
    this.getListData()
  }
}
</script>
